<template>
    <div class="circle-detail-box">
     <download></download>
        <div class="detail-header">
            <!-- <div class="show-doit">
                <span :class="{selected: cur==0}" @click="clickDiot(0)">视频</span>
                <span :class="{selected: cur!=0}" @click="clickDiot(1)">图片</span>
            </div>
            <div class="detail-header-box" :style="{'width': width + 'px'}" @touchstart="initTouch($event)" @touchmove="move($event)" @touchend="leave($event)">
                <div class="circle-header-item video-item">
                    <div v-show="!showVideo" :style="{'background-image': 'url('+detailItem.videoImgUrl+')'}"></div>
                    <video class="video" controls>
                        <source type="video/mp4" class="video-source">
                    </video>
                    <span class="play-item" @click="playVideo" v-show="!showVideo"></span>
                </div>
                <div class="circle-header-item" v-for="item in detailItem.circleImageVo" :style="{'background-image': 'url('+item.url+')'}">
                </div>
            </div> -->
            <swiper :options="swiperOption">
                <swiper-slide v-if="videoUrl">
                    <div class="circle-header-item video-item">
                        <video class="video" :poster="detailItem.videoImgUrl">
                            <source type="video/mp4" class="video-source">
                        </video>
                        <span class="play-item" @click="playVideo" v-show="!showVideo"></span>
                    </div>
                </swiper-slide>
                <swiper-slide v-for="(item, i) in detailItem.circleImageVo" :key="i">
                    <img style="width: 100%;" :src="item.url" alt="">
                </swiper-slide>
                <div class="swiper-pagination my-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="detail-intro">
            <div class="person-box">
                <h3 class="detail-person-name audio-body">{{detailItem.username}}
                    <img @click="clickCircleAudio" v-if="!!circleAudio.url" :src="circleAudio.isActive? audioActiveImg:audioStaticImg" alt="">
                    <audio id="circleAudio" :src="circleAudio.url">亲 您的浏览器不支持html5的audio标签</audio>
                    <span v-if="!!circleAudio.url">{{circleAudio.time}}s′′</span>
                </h3>
                <p class="detail-person-intro">{{detailItem.company}}，{{detailItem.profession}}</p>
            </div>
            <div class="person-job">
                {{detailItem.circleName}}
            </div>
            <div v-if="(level==1 || level ==2) && !isHaveBuy">
                <!-- <div class="person-price-box"><span>价格：{{detailItem.latestPrice}}元</span></div> -->
                <div class="person-price-box">圈子价值：{{detailItem.moneyStr}}亿元<i class="hint" @click="showCircleMoney = true">?</i></div>
            </div>
            <mt-popup
                v-model="showCircleMoney"
                popup-transition="popup-fade"
                class="price-pop">
                <div class="price-pop-content">
                    <p class="price-pop-title">圈子价值</p>
                    <p class="price-pop-body">圈子价值是衡量圈子能量、社会价值以及核心竞争力的参考数据，主要以群主和嘉宾各自的行业知名度、社会地位、出版书籍数量、社会评价、社会影响力、人格魅力、年收入范围、年参加大型会议的数量、经验能力等十个维度指标进行加权平均计算后产生个人价值系数，再乘以各自的年度输入标准，算出各自的价值分数，汇总后得出圈子整体的价值分数，视为圈子价值。</p>
                    <p class="price-pop-refer">（仅供参考）</p>
                </div>
                <p class="price-pop-button" @click="showCircleMoney = false">确定</p>
            </mt-popup>
            <div v-if="(level==1 || level ==2) && isHaveBuy">
                <div class="person-price-box"><span>发行价格：{{detailItem.circleIssuePrice}}元</span><span>买入价格：{{detailItem.discountPrice}}元</span><span>当前阶段：{{detailItem.currentStatusStr}}</span><span>买入阶段：{{detailItem.buyStatusStr}}</span><span>持有数量：{{detailItem.holdNum}}席</span></div>
            </div>
            <div class="intro-box">
                <div class="intro-header">
                    <div :class="{'selected': isShow == 0}" @click="isShow=0">简介</div>
                    <!-- <div :class="{'selected': isShow == 1}" @click="isShow=1">详情</div> -->
                </div>
                <div class="intro-detail-box" v-show="isShow==0">
                    <p class="title">圈主简介</p>
                    <p class="sub-title">{{detailItem.company}}/{{detailItem.profession}}</p>
                    <p class="title-intro">{{detailItem.circleIntroduction}}</p>
                    <p class="intro-word">
                    </p>
                </div>
                <div class="intro-detail-more-box" v-show="isShow==1">222</div>
            </div>
            <div class="quanzi-intro-box">
                <div class="title">圈子简介</div>
                <p>{{detailItem.introduce}}</p>
            </div>
            <div class="quanzi-intro-box">
                <div class=" title audio-body">圈主首秀
                    <img @click="clickCircleFirstAudio" v-if="!!circleFirstAudio.url" :src="circleFirstAudio.isActive? audioActiveImg:audioStaticImg" alt="">
                    <audio id="circleFirstAudio" :src="circleFirstAudio.url">亲 您的浏览器不支持html5的audio标签</audio>
                    <span  v-if="!!circleFirstAudio.url">{{circleFirstAudio.time}}s′′</span>
                </div>
                <p :class="{'fold': firstShow}">{{detailItem.circleCorevalue}}</p>
                <template v-if="detailItem.circleCorevalue && detailItem.circleCorevalue.length > 60">
                    <p class="show-full" @click="firstShow = false" v-show="firstShow">阅读全文<i></i></p>
                    <p class="close-full" @click="firstShow = true" v-show="!firstShow">收起<i></i></p>
                </template>
            </div>
            <div class="quanzi-intro-box">
                <div class="title">未来您将听到</div>
                <p :class="{'fold': firstFuture}">{{detailItem.membersHear}}</p>
                <template v-if="detailItem.membersHear && detailItem.membersHear.length > 60">
                    <p class="show-full" @click="firstFuture = false" v-show="firstFuture">阅读全文<i></i></p>
                    <p class="close-full" @click="firstFuture = true" v-show="!firstFuture">收起<i></i></p>
                </template>
            </div>
            <div v-if="detailItem.guestList && detailItem.guestList.length > 0" class="invite-box">
                <h3>嘉宾</h3>
                <div class="invite-item" v-for="ite in detailItem.guestList">
                    <img :src="ite.userLogo" alt="">
                    <span class="invite-name">{{ite.username}}</span><span>{{ite.company}}{{ite.profession}}</span>
                </div>
            </div>
              <div v-if="detailItem.circleInformationList && detailItem.circleInformationList.length > 0" class="media-link-box">
                <h3>媒体链接</h3>
                <ul>
                    <li v-for="(ita, index) in detailItem.circleInformationList"><span>{{index+1}}、</span><a :href="ita.informationUrl">《{{ita.informationTitle}}》</a></li>
                </ul>
            </div>
            <!-- <div class="ganhuoqu-box">
                <h3>干货区</h3>
                <p v-html="detailItem.circleCorevalue"></p>
            </div> -->
        </div>
        <div v-if="topicList && topicList.length > 0" class="fenxiang-title">
            <div>详情</div>
        </div>
        <div class="fenxiang-info">
            <div class="fenxiang-info-content" v-for="(topic, index) in topicList.slice(0, 10)" :key="index">
                <div class="fenxiang-info-img">
                    <img :src="topic.headPhotoUrl" alt="">
                </div>
                <div class="fenxiang-info-body">
                    <div class="title">{{topic.userName}}</div>
                    <p class="p">{{topic.content}}</p>
                    <p class="out-link"  v-if="topic.type === '12'">
                        <img :src="topic.coverImg" alt="">
                        <span>{{topic.fileName}}</span>
                    </p>
                    <p class="pic-body" v-if="~~topic.type === 1">
                        <template v-if="topic.pictureArr && topic.pictureArr.length > 0">
                            <img class="many-img" :src="picture" v-for="(picture, index) in topic.pictureArr" :key="index" alt="">
                        </template>
                        <img class="single-img" v-if="topic.picture" :src="topic.picture" alt="">
                    </p>
                    <!-- <p class="cdt">来自<span>{{topic.circleName}}</span>{{topic.createDateText}}</p> -->
                    <p class="cps">{{topic.commentCountText}}&nbsp;&nbsp;|&nbsp;&nbsp;{{topic.praiseCountText}}&nbsp;&nbsp;|&nbsp;&nbsp;{{topic.shareCountText}}</p>
                </div>
            </div>
            <!-- <p class="show-full" @click="isShowMoreShare = true" v-show="topicList && topicList.length > 2 && !isShowMoreShare">查看更多<i></i></p>
            <div v-if="topicList && topicList.length > 2 && isShowMoreShare" class="fenxiang-info-content" v-for="(topic, index) in topicList.slice(2)" :key="index">
                <div class="fenxiang-info-img">
                    <img :src="topic.headPhotoUrl" alt="">
                </div>
                <div class="fenxiang-info-body">
                    <h2>{{topic.userName}}</h2>
                    <p class="fenxiang-ct">{{topic.content}}</p>
                    <p class="out-link" v-if="topic.fileName">
                        <img :src="topic.coverImg" alt="">
                        <span @click="toOutLink(topic.fileUrl)">{{topic.fileName}}</span>
                    </p>
                    <p class="cdt">{{topic.createDateText}}</p>
                    <p class="cps">{{topic.commentCountText}}&nbsp;&nbsp;|&nbsp;&nbsp;{{topic.praiseCountText}}&nbsp;&nbsp;|&nbsp;&nbsp;{{topic.shareCountText}}</p>
                </div>
            </div> -->
        </div>
        <div class="offer" v-if="isOffer">
            <div class="share-btn" @click="shareOfferBtn">立即分享</div>
        </div>
        <template v-else>
            <template v-if="status === 4">
                <div class="count-down">
                    内购开始时间{{endDateParse}}
                </div>
            </template>
            <template v-else>
                <div class="footer-box" v-if="(level == 1 || level == 2 ) && !isHaveBuy">
                    <div class="price">{{priceBuy}}元</div>
                    <div class="buy-btn" @click="isBuy=true">立即购买</div>
                </div>
                <div class="footer-box" v-if="(!isAgent) && !isHaveBuy && fapp != 1">
                    <div class="price">现价{{priceBuy}}元 <span class="old-price">{{detailItem.openPrice}}元</span> </div>
                    <div class="buy-btn" @click="sureBuy">立即购买</div>
                </div>
                <div class="footer-box" v-if="isAgent && isHaveBuy">
                    <div  @click='judge1' class="haibao">生成海报图</div>
                    <div class="share-btn" @click="shareBtn">立即分享</div>
                </div>
                <buy-box v-if="isBuy" :price="discountPrice" @changeIsBuy="changeIsBuy" @sureBuy="sureBuy"></buy-box>
            </template>
        </template>
        <share-wechat v-if="shareShow" @destroyF="destroyFix"></share-wechat>
        
    </div>
</template>
<script>
import market from '@/api/market.js'
import login from '@/api/login.js'
import buyBox from '../buyBox.vue'
import cookie from '../../../../util/cookie.js'
import shareWechat from '../shareWechat.vue'
import third from '@/api/thirdPay.js'
import download from '../../../components/download.vue'
import { Toast } from 'mint-ui'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    components: {
        buyBox,
        shareWechat,
        download,
        swiper,
        swiperSlide
    },
    data () {
        return {
            shareShow: false,
            showVideo: false,
            isShow: 0,
            isBuy: false,
            price: 100,
            type: '',
            detailItem: '',
            cur: 0,
            dom: '',
            width: 0,
            videoUrl: '',
            uid: '',
            agentId: '',
            isAgent: '',
            level: '',
            id: '',
            cid: '',
            agentId: this.$route.query.agentId,
            priceBuy: 0,
            isHaveBuy: this.$route.query.isHaveBuy,
            status: ~~this.$route.query.status,
            sharePrice: this.$route.query.price,
            circleName: '',
            introduce: '',
            userLogo: '',
			discountPrice:0,
            currentStatusStr:'',
            showCircleMoney: false,
            firstShow: true,
            firstFuture: true,
            isShowMoreShare: false,
            topicList: [],
            isOffer: this.$route.query.isOffer,
            fapp: '',
            swiperOption: {
                // loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction'
                }
            },
            audioActiveImg: require('../../../assets/img/send-action.gif'),
            audioStaticImg: require('../../../assets/img/send-static.png'),
            circleAudio: {
                isActive: false
            },
            circleFirstAudio: {
                isActive: false
            },
            endDateParse: '',
            myAgentId: this.$route.query.myAgentId
        }
    },
    mounted() {
        //判断用户性质，
        //localStorage.getItem('dongHang_data')代理商
        //localStorage.getItem('dongHang_common_user')普通用户
        this.isAgent = !!localStorage.getItem('dongHang_data')
        this.level = this.isAgent ? JSON.parse(localStorage.getItem('dongHang_data')).level : -1
        this.uid = localStorage.getItem('dongHang_common_user') ? JSON.parse(localStorage.getItem('dongHang_common_user')).uid : false
        this.cid = this.$route.query.pid //商品id
        this.fapp = ~~this.$route.query.fapp
        if (this.myAgentId) {
            sessionStorage.myAgentId = this.myAgentId
        }
        // this.dom = document.querySelector('.detail-header-box')
        // this.left = this.dom.offsetLeft
        if (this.isAgent) {
            if (!this.isHaveBuy) {
                var obj = {
                    cid: this.$route.query.pid,
                    type: 1,
                    agentId: this.agentId
                }
            } else {
                var obj = {
                    cid: this.$route.query.pid,
                    type: 2,
                    agentId: this.agentId
                }
            }
            this.getCircleDetail(obj)
        } else {
            if (this.uid) {
                if (!this.isHaveBuy) {
                    var obj = {
                        cid: this.$route.query.pid,
                        type: 1,
                        uid: this.uid
                    }
                } else {
                    var obj = {
                        cid: this.$route.query.pid,
                        type: 2,
                        uid: this.uid
                    }
                }
            } else {
                var obj = {
                    cid: this.$route.query.pid,
                    type: 1
                }
            }
            this.getCircleDetail(obj)
        }
        this.getCircleTopicList({cid: this.$route.query.pid})
    },
    methods: {
        weiXinConfig() {
		  //if(this.currentStatusStr == '内购期'){
		      //this.shareShow =false;
		     // Toast({
                       // message: '请注意:圈子内购阶段,不允许分享',
                        //duration: 1000
                    //})
		  //}else
		  //{	 
            var link = "http://dh.rz158.com/#/circleDetail?&from=singlemessage&myAgentId=" + this.agentId + "&pid=" + this.cid;
            var url = 'http://dlsapi.rz158.com/thirdPay/getConfig?url=' + location.href.split('#')[0]; 
            if (this.isOffer) {
                link += '&price=' + this.$route.query.offerPrice
            }
            third.sharedWeiXin(url, this.circleName, this.introduce, link, this.userLogo);
		  //}
        },
        shareOfferBtn() {
            this.shareShow = true
        },

        shareBtn() {
		  if(this.currentStatusStr == '内购期'){
            this.shareShow =false;
            Toast({
                message: '圈子内购阶段,不允许分享哦',
                duration: 1000
            })
            return false;
		  } else {
            this.$router.push({
                path: '/makeOffer', 
                query: {
                    agentId: this.agentId,
                    currentStatus: this.detailItem.currentStatus,
                    circleName: this.detailItem.circleName,
                    buyPrice: this.detailItem.latestPrice,
                    holdNum: this.detailItem.holdNum,
                    userLogo: this.detailItem.userLogo,
                    circleLogo: this.detailItem.circleLogo,
                    status: 1,
                    introduce: this.detailItem.introduce,
                    pid: this.cid,
                    // circleUrl: location.href.split('#')[0],
                    type: 1
                }
            })
            // this.shareShow =true
		  }
        },
        getUrlParam (name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        },
        destroyFix() {
            this.shareShow = false;
        },
        //openApp () {
          // if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
          //   //alert(navigator.userAgent);
          //   window.location.href ="http://itunes.apple.com/app/id1370346581";
          // } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
          //   //alert(navigator.userAgent);
          //   window.location.href ="https://www.baidu.com";
          // } else { //pc
          //   window.location.href ="pc.html";
          // };

          //window.location.href = "http://donghang.rz158.com/html/html_rource_bl/html/client/app.html"
        //},
        getCircleDetail (obj) {
            market.getCircleDetail(obj).then(res => {
                if (res.code == 0) {
                    this.detailItem = res.result
                    this.circleName = this.detailItem.circleName;
                    this.userLogo = this.detailItem.userLogo;
                    this.introduce = this.detailItem.introduce;
                    cookie.set('title', this.detailItem.title);
                    cookie.set('img', this.detailItem.userLogo);
                    this.priceBuy = this.isAgent ? this.detailItem.latestPrice : this.sharePrice || this.detailItem.latestPrice;
                    this.discountPrice = this.isAgent ? this.detailItem.discountPrice : this.sharePrice || this.detailItem.latestPrice;
                    cookie.set('circleprice', this.priceBuy);
                    cookie.set('username', this.detailItem.username);
                    localStorage.username = this.detailItem.username
                    localStorage.circleName = this.detailItem.circleName
                    cookie.set('circleCode', this.detailItem.circleCode);
                    cookie.set('agediscountPrice', this.discountPrice);
                    cookie.set('circleName', this.detailItem.circleName)
                    this.videoUrl = this.detailItem.circleVideoVo && this.detailItem.circleVideoVo.length > 0 && this.detailItem.circleVideoVo[0].url;
                    // this.width = (this.detailItem.circleImageVo.length + 1) * this.dom.childNodes[0].offsetWidth;
					this.currentStatusStr = this.detailItem.currentStatusStr;
                    this.weiXinConfig()
                    this.status === 1 && (this.endDateParse = this.parseDate(this.detailItem.issueEndDate))
                    const circleAudioVos = this.detailItem.circleAudioVos || []
                    circleAudioVos.forEach(item => {
                        if (item.fileType === 3) {
                            this.circleAudio = {url: item.url, time: item.audioDuration, ...this.circleAudio}
                        } else if (item.fileType === 4) {
                            this.circleFirstAudio = {url: item.url, time: item.audioDuration, ...this.circleFirstAudio}
                        }
                    })
                }
            })
        },

        parseDate(date) {
            if (!date) return
            date = date.replace(/-/g, '/')
            let d = new Date(date)
            return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 ${d.getHours()}:${d.getMinutes()}`
        },

        getCircleTopicList(obj) {
            // let demo = require('./demo.json')
            market.getCircleTopicList(obj).then(({result}) => {
                this.topicList = result || []
            })
        },

        initTouch (e) {
            this.initX = e.touches[0].clientX
        },
        playVideo () {
            this.showVideo = true
            document.querySelector('.video-source').src = this.videoUrl
            document.querySelector('.video').load()
            document.querySelector('.video').play()
        },
        move (e) {
            this.changeX = e.touches[0].clientX
        },
        clickDiot (index) {
            this.cur = index
            this.changeWidth(index, index)
        },
        changeWidth (cur, k) {
            document.querySelector('.video').pause()
            this.showVideo = false
            this.newLeft = this.dom.childNodes[0].offsetWidth * cur
            this.timer = setInterval (() => {
                if (k == 1 && this.left > - this.newLeft) {
                    this.left = this.left - 10
                    this.dom.style.left = this.left + 'px'
                } else if (k ==0 && this.left < this.newLeft) {
                        this.left = this.left + 10
                        this.dom.style.left = this.left + 'px'
                } else {
                    clearInterval(this.timer)
                }
            }, 20)
        },
        leave (e) {
            if ((this.changeX - this.initX < 0) && this.cur < this.detailItem.circleImageVo.length) {
                this.cur++
                this.changeWidth(this.cur, 1)
            }
            if ((this.changeX - this.initX > 0) && this.cur > 0) {
                this.cur--
                this.changeWidth(this.cur, 0)
            }
        },
        changeIsBuy (state) {
            this.isBuy = state
        },
		judge1() {
		  if(this.currentStatusStr == '内购期'){
		      this.shareShow =false;
		      Toast({
                message: '圈子内购阶段,不允许分享哦',
                duration: 1000
            })
		   return false;
		  } else {	 
            this.$router.push({
                path: '/makeOffer', 
                query: {
                    agentId: this.agentId,
                    currentStatus: this.detailItem.currentStatus,
                    circleName: this.detailItem.circleName,
                    buyPrice: this.detailItem.latestPrice,
                    holdNum: this.detailItem.holdNum,
                    circleLogo: this.detailItem.circleLogo,
                    status: 0,
                    pid: this.cid,
                    type: 1
                }
            })
            // this.$router.push({path: '/post', query: {agentId: this.agentId, pid: this.cid, type: 1}})
		  }
        },
        sureBuy (obj) {
            this.isBuy = false
            
            //普通用户判断是否登录态失效,普通用户改为只能购买1个席位
            if (!this.isAgent) {
			     cookie.set('num', 1)
                 cookie.set('allprice', this.priceBuy)
                // if (this.uid) {
                //     market.checkLogin(this.uid).then(res => {
                //         if (res.code == 0) {
                //             this.isBuy = false
                //             cookie.set('num', obj.num)
                //             cookie.set('allprice', obj.all)
                //             this.$router.push({path: '/circlesure', query:{agentId: this.$route.query.agentId, pid: this.$route.query.pid, uid: this.uid, status: this.$route.query.status}})
                //         } else if (res.code == -1){
                //             this.$router.push({path: '/user/login', query: {type: 0, agentId: this.$route.query.agentId, pid: this.$route.query.pid, status: this.$route.query.status}})
                //         }
                //     })
                // } else {
                    this.$router.push({path: '/user/login', query: {type: 0, agentId: this.$route.query.agentId, pid: this.$route.query.pid, status: this.$route.query.status}})
                // }
            } else {
			    cookie.set('num', obj.num)
                cookie.set('allprice', obj.all)
                this.$router.push({path: '/circlesure', query:{agentId: this.$route.query.agentId, pid: this.$route.query.pid, status: this.$route.query.status}})
            }
        },
        toOutLink(url) {
            window.location.href = url
        },
        clickCircleFirstAudio() {
            let _circleAudio = document.querySelector('#circleAudio')
            let _circleFirstAudio = document.querySelector('#circleFirstAudio')
            if (this.circleFirstAudio.isActive) {
                _circleFirstAudio.load()
            } else {
                this.circleAudio.isActive = false
                _circleAudio.load()
                _circleFirstAudio.play()
            }
            this.circleFirstAudio.isActive = !this.circleFirstAudio.isActive
        },
        clickCircleAudio() {
             let _circleAudio = document.querySelector('#circleAudio')
             let _circleFirstAudio = document.querySelector('#circleFirstAudio')
            if (this.circleAudio.isActive) {
                _circleAudio.load()
            } else {
                this.circleFirstAudio.isActive = false
                _circleFirstAudio.load()
                _circleAudio.play()
            }
            this.circleAudio.isActive = !this.circleAudio.isActive
        }
    }
}
</script>

<style lang="less" scoped>
    .circle-detail-box {
        margin-bottom: .8rem;
        .my-pagination {
            font-size: .25rem;
            color: #fff;
            background: #827f7f;
            opacity: .7;
            width: auto;
            right: .2rem;
            left: auto;
            padding: 0px 6px;
            border-radius: 16px;
        }
        .detail-header {
            width: 100%;
            position: relative;
            height: 4.5rem;
			margin-top: 1rem;
            overflow: hidden;
            .show-doit {
                font-size: 0.22rem;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0.2rem;
                z-index: 999;
                span {
                    float: left;
                    margin-right: 0.2rem;
                    height: 0.45rem;
                    line-height: 0.45rem;
                    width: 0.9rem;
                    text-align: center;
                    background: rgba(265, 265, 265, 0.7);
                    color: #000;
                    border-radius: 0.9rem;
                }
                .selected {
                    background: #29abae;
                    color: #fff;
                }
            }
            .detail-header-box {
                // width: 67.5rem;
                position: absolute;
                left: 0;
                height: 6rem;
            }
            .circle-header-item {
                width: 7.5rem;
                height: 4.5rem;
                font-size: 0;
                background-position: center top;
                float: left;
                position: relative;
                div {
                    width: 7.5rem;
                    height: 4.5rem;
                    background-position: center top;
                }
                video {
                    width: 7.5rem;
                    height: 6rem;
                }
            }
            .video-item {
                position: relative;
                div {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 88;
                    width: 7.5rem;
                    height: 6rem;
                }
                video {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 80;
                    width: 7.5rem;
                    height: 4.5rem;
                }
            }
            .play-item {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 1.2rem;
                height: 1.2rem;
                background: url(../../../assets/img/play-icon.png) no-repeat;
                background-size: 100%;
                margin-left: -0.6rem;
                margin-top: -0.6rem;
                z-index: 888;
            }
        }
        .detail-intro {
            .person-box {
                font-size: 0;
                border-bottom: 0.15rem solid #efefef;
                padding: 0.2rem 0.3rem;
                h3 {
                    color: #000;
                    font-family: PingFang-SC-Bold;
                    font-size: 0.4rem;
                    font-weight: normal;
                    margin-bottom: 0.1rem;
                }
                p {
                    color: #282828;
                    font-size: 0.28rem;
                }
            }
            .price-pop {
                width: 70%;
                font-size: .3rem;
                border-radius: 5px;
                &-content {
                    width: 85%;
                    margin: 0 auto;
                    border-radius: 5px;
                }
                &-title {
                    color: #29abae;
                    text-align: center;
                    margin: 20px auto 6px;
                }
                &-body {
                    text-indent: 2em;
                }
                &-refer {
                    text-align: right;
                    color: #ef4f4f;
                    margin: 10px auto;
                }
                &-button {
                    text-align: center;
                    height: 36px;
                    line-height: 36px;
                    border-top: 1px solid #e6e5e5;
                }
            }
            .person-job {
                color: #0a0a0a;
                font-size: 0.3rem;
                padding: 0.2rem 0.3rem;
                border-bottom: 1px solid #efefef;
                span {
                    color: #29abae;
                    margin-left: 0.2rem;
                }
            }
            .person-price-box {
                color: #282828;
                font-size: 0.28rem;
                padding: 0.2rem 0.3rem;
                overflow: auto;
                // border-bottom: 0.15rem solid #efefef;
                span {
                    float: left;
                    // margin-right: 0.5rem;
                    width: 50%;
                    margin-bottom: 0.1rem;
                }
                .hint {
                    background: #29abae;
                    display: inline-block;
                    height: 0.45rem;
                    width: 0.45rem;
                    text-align: center;
                    font-style: normal;
                    border-radius: 50%;
                    color: #fff;
                    font-size: .32rem;
                    transform: scale(0.6);
                    margin-left: 2px;
                }
            }
            .intro-box {
                .intro-header {
                    padding: 0.2rem 0.3rem;
                    border-bottom: 1px solid #efefef;
                    display: flex;
                    background: #efefef;
                    div {
                        flex: 1;
                        font-size: 0.3rem;
                        text-align: center;
                        border-right: 1px solid #4e4e4e;
                        color: #909090;
                        &:last-child {
                            border-right: none;
                        }
                    }
                    .selected {
                        color: #282828;
                    }
                }
                .intro-detail-box {
                    padding: 0.2rem 0.3rem;
                    border-bottom: 1px solid #efefef;
                    .title {
                        color: #151515;
                        font-family: 'PingFang-SC-Bold';
                        font-size: 0.36rem;
                        margin-bottom: 0.1rem;
                    }
                    .sub-title {
                        color: #282828;
                        font-family: 'PingFang-SC-Bold';
                        font-size: 0.32rem;
                        margin-bottom: 0.1rem;
                    }
                    .title-intro {
                        color: #393939;
                        font-size: 0.32rem;
                        margin-bottom: 0.1rem;
                    }
                    .intro-word {
                        color: #282828;
                        font-size: 0.28rem;
                        word-wrap: break-word;
                        word-break: normal;
                    }
                }
            }
            .media-link-box {
                padding: 0.2rem 0.3rem;
                border-bottom: 1px solid #efefef;
                h3 {
                    color: #151515;
                    font-size: 0.36rem;
                    font-weight: normal;
                    margin-bottom: 0.1rem;
                }
                ul {
                    font-size: 0.28rem;
                    li {
                        span {
                            color: #282828;
                        }
                        a {
                            color: #f6644d;
                            text-decoration: underline;
                        }
                    }
                }
            }
            .invite-box {
                padding: 0.2rem 0.3rem;
                border-bottom: 1px solid #efefef;
                h3 {
                    color: #151515;
                    font-size: 0.36rem;
                    font-weight: normal;
                }
                .invite-item {
                    font-size: 0;
                    height: 1.3rem;
                    line-height: 1.3rem;
                    border-bottom: 1px solid #efefef;
                    &:last-child {
                        border-bottom: none;
                    }
                    img {
                        width: 0.8rem;
                        height: 0.8rem;
                        border-radius: 0.8rem;
                        margin-top: 0.2rem;
                    }
                    .invite-name {
                        margin-left: 0.24rem;
                        font-size: 0.24rem;
                        color: #0a0a0a;
                        vertical-align: top
                    }
                    span {
                        font-size: 0.2rem;
                        color: #707070;
                        margin-left: 0.2rem;
                        vertical-align: top;
                    }
                }
            }
            .quanzi-intro-box {
                padding: 0.2rem 0.3rem;
                border-bottom: 1px solid #efefef;
                .title {
                    color: #151515;
                    font-size: 0.36rem;
                    font-family: 'PingFang-SC-Bold';
                    margin-bottom: 0.1rem;
                }
                p {
                    color: #393939;
                    font-size: 0.32rem;
                    text-align: justify;
                }
                .fold {
                    display: -webkit-box;    
                    -webkit-box-orient: vertical;    
                    -webkit-line-clamp: 3;    
                    overflow: hidden;
                    color: #282828;
                    font-family: 'PingFang-SC';
                }
            }
            .ganhuoqu-box {
                padding: 0.2rem 0.3rem;
                border-bottom: 1px solid #efefef;
                h3 {
                    color: #151515;
                    font-size: 0.36rem;
                    font-weight: normal;
                    margin-bottom: 0.1rem;
                }
                p {
                    color: #282828;
                    font-size: 0.28rem;
                }
            }
        }
        .show-full, .close-full {
            text-align: center!important;
            font-size: .28rem!important;
            // color: #2aabae;
            margin: 10px!important;
            color: #707070!important;
        }
        .show-full {
            i {
                transform: rotate(90deg);
                background: url(../../../assets/img/next-icon.png) no-repeat;
                background-size: 7px 12px;
                width: 13px;
                height: 15px;
                display: inline-block;
                position: relative;
                top: 6px;
                margin-left: 2px;
            }
        }
        .close-full {
            i {
                transform: rotate(-90deg);
                background: url(../../../assets/img/next-icon.png) no-repeat;
                background-size: 7px 12px;
                width: 15px;
                height: 15px;
                display: inline-block;
                position: relative;
                bottom: 2px;
                margin-left: 2px;
            }
        }
        .fenxiang-title {
            padding: 0.2rem 0.3rem;
            border-bottom: 1px solid #efefef;
            font-size: 0.3rem;
            text-align: center;
            color: #707070;
            font-family: 'PingFang-SC-Medium';
            background: #EFEFEF;
        }
        .fenxiang-info {
            .fenxiang-info-content {
                display: flex;
                font-size: .32rem;
                padding-top: 10px;
                border-bottom: 1px solid #efebeb;
                .fenxiang-info-img {
                    width: 1rem;
                    border-radius: 26px;
                    img {
                        width: .61rem;
                        height: .61rem;
                        margin-left: .19rem;
                        border-radius: 50%;
                    }
                }
                .fenxiang-info-body {
                    width: auto;
                    flex: 1;
                    margin-right: .2rem;
                    .title {
                        font-style: normal;
                        font-size: .32rem;
                        font-family: PingFang-SC-Bold;
                        color: #5B6A92;
                    }
                    .p {
                        text-align: justify;
                    }
                    .fenxiang-ct {
                        width: 95%;
                        margin: 0 auto;
                    }
                    .out-link {
                        height: 1.01rem;
                        display: flex;
                        align-items: center;
                        background: #EFEFEF;
                        margin: 10px 0;
                        width: 96%;
                        img {
                            height: 40px;
                            margin-left: 5px;
                        }
                        span {
                            font-family: 'PingFang-SC-Regular';
                            color: #282828;
                            margin-left: 5px;
                        }
                    }
                    .pic-body {
                        .single-img {
                            width: 45%;
                            margin: .2rem 0;
                        }
                        .many-img {

                        }
                    }
                    .cdt {
                        color: #b7b7b7;
                        font-size: .24rem;
                        font-family: PingFang-SC-Regular;
                        margin-bottom: 5px;
                        span {
                            color: #2abec1;
                            margin: 0 .1rem;
                        }
                    }
                    .cps {
                        margin-bottom: 10px;
                        font-size: .24rem;
                        font-family: PingFang-SC-Regular;
                        color: #282828;
                    }
                }
            }
        }
        .count-down {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #29abae;
            color: #fff;
            font-size: .32rem;
            height: .81rem;
            font-family: 'PingFang-SC-Bold';
            line-height: .81rem;
            text-align: center;
        }
        .audio-body {
            height: 35px;
            display: flex;
            align-items: center;
            img {
                height: 90%;
                width: 1.8rem;
                margin-left: 10px;
            }
            span {
                color: #00aeb0;
                font-size: .22rem;
                margin-left: 10px;
                position: relative;
                top: 3px;
            }
        }
        .footer-box {
            display: flex;
            height: 0.8rem;
            font-size: 0.32rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            .price {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #fff;
                color: #ff2d41;
                text-align: center;
                .old-price {
                    color: #9c9c9c;
                    font-size: .2rem;
                    text-decoration: line-through;
                }
            }
            
            .buy-btn {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #29abae;
                color: #fff;
                text-align: center;
            }
            .haibao {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #ff9920;
                color: #fff;
                text-align: center;
            }
            .share-btn {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #29abae;
                color: #fff;
                text-align: center;
            }
        }
        .offer{
            font-size: 0.32rem;
            position: fixed;
            width: 100%;
            bottom: 0;
            .share-btn {
                height: 0.8rem;
                line-height: 0.8rem;
                background: #29abae;
                color: #fff;
                text-align: center;
            }
        }
        
    }
</style>
